<!-- infomation -->
<template>
  <view class="nav">
    <!-- 顶部导航 -->
    <toptab-bar></toptab-bar>
    <information-header-vue></information-header-vue>
  </view>

  <!-- 内容区域 -->
  <scroll-view
    class="content"
    scroll-y
    @scrolltolower="loadMore"
    refresher-enabled
    :refresher-triggered="isRefreshing"
    @refresherrefresh="onRefresh"
  >
    <view class="body">
      <!-- 广告位 -->
      <view class="banner">
        <image
          v-if="bannerUrl"
          :src="bannerUrl"
          mode="aspectFill"
          @error="handleBannerError"
        ></image>
      </view>

      <!-- 仅展示第一条视频 -->
      <view 
        class="videolist"
        v-if="videoList.length > 0"
        @click="handleVideoClick(videoList[0])"
      >
        <view 
		class="news-video"
		v-for="item in videoList"
		:key="item.news_id"
		@click="handleNewsClick(item)"
		>
          <view class="text">
            <view class="title">{{ videoList[0].news_title }}</view>
            <view class="mes">
              <text style="margin: 30rpx 10rpx">{{ videoList[0].club_name }}</text>
              <text style="margin: 30rpx 10rpx">浏览{{ videoList[0].clicks }}</text>
            </view>
          </view>
          <image
            :src="getImageUrl(item.news_logo)"
            mode="aspectFill"
            @error="handleImageError(item)"
          ></image>
        </view>
      </view>

      <!-- 资讯图文 -->
      <view
        class="newslist"
        v-for="item in newsList"
        :key="item.news_id"
        @click="handleNewsClick(item)"
      >
        <view class="new-box">
          <image
            :src="getImageUrl(item.news_logo)"
            mode="aspectFill"
            @error="handleImageError(item)"
          ></image>
          <view class="new">
            <view class="title">{{ item.news_title }}</view>
            <view class="mes">
              <view style="margin: 30rpx 10rpx">{{ item.club_name }}</view>
              <view style="margin: 30rpx 10rpx">浏览{{ item.clicks || 0 }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载状态提示 -->
      <view class="loading-status">
        <text v-if="newsLoading">加载中...</text>
        <text v-else-if="newsIsEnd">没有更多数据了</text>
        <text v-else-if="errorMsg" style="color: red">{{ errorMsg }}</text>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import toptabBar from '@/pages/index/toptabbar/tabbar.vue'
import informationHeaderVue from '../../../components/information/informationHeader.vue'
import decInformationApi from '../../../api/dec/decIndex/decInformationApi'
// 新闻相关状态
const newsList = ref([])
const newsCurrentPage = ref(1)
const newsTotalCount = ref(0)
const newsLoading = ref(false)
const newsIsEnd = ref(false)

// 视频相关状态（只保留最新一条）
const videoList = ref([])
const isRefreshing = ref(false)
const bannerUrl = ref('')
const errorMsg = ref('')

const getImageUrl = (path) => {
  return path ? `https://upload.gfinter.net/${path}` : ''
}

// 获取新闻数据（保持原有分页逻辑）
const fetchNews = async (isRefresh = false) => {
  if (newsLoading.value) return

  try {
    newsLoading.value = true
    const page = isRefresh ? 1 : newsCurrentPage.value
	let params = {
	  section: 882,
	  page: page,
	  per_page: 10,
	  get_section: 0
	};
   const res = await decInformationApi.GF_get_news_API(params);
	
	
    const data = res.datas
    if (res.error === 0) {
      if (isRefresh) {
        newsList.value = data
		
        // 更新banner
        if (data.length > 0) {
          bannerUrl.value = getImageUrl(data[0].news_logo)
        }
      } else {
        newsList.value = [...newsList.value, ...data]
      }

      newsTotalCount.value = parseInt(data.total_count)
      newsIsEnd.value = newsList.value.length >= newsTotalCount.value
      if (!isRefresh) newsCurrentPage.value += 1
    } else {
      errorMsg.value = data.msg || '获取新闻失败'
    }
  } catch (err) {
    errorMsg.value = '新闻请求失败'
    console.error('News API Error:', err)
  } finally {
    newsLoading.value = false
  }
}




// 修改 fetchVideo 方法
const fetchVideo = async () => {
  try {
    let params = {
      section: 885,
      page: 1,
      per_page: 1,
      get_section: 0
    };
    
    const res = await decInformationApi.GF_get_news_API(params);
    
    // 检查响应结构
    // console.log('API响应:', res); // 调试用
    
    if (res?.error === 0) {
      videoList.value = res.datas?.slice(0, 1) || [];
    } else {
      console.warn('视频接口返回异常:', res?.msg || '未知错误');
    }
  } catch (err) {
    console.error('Video API Error:', err);
    errorMsg.value = '获取视频失败';
  }
}



// 修改后的加载更多（只加载新闻）
const loadMore = () => {
  if (!newsIsEnd.value) fetchNews()
}



// 修改后的下拉刷新（同时刷新新闻和视频）
const onRefresh = () => {
  isRefreshing.value = true
  Promise.all([
    fetchNews(true),
    fetchVideo()
	
  ]).finally(() => {
    isRefreshing.value = false
  })
}

// 图片处理（保持不变）
const handleImageError = (item) => {
  item.news_logo = ''
}
const handleBannerError = () => {
  bannerUrl.value = ''
}

// 点击事件（保持不变）
const handleNewsClick = (item) => {
  uni.navigateTo({
    url: `/pages/index/information/infoDetails/detail?id=${item.news_id}`
  })
}

const handleVideoClick = (item) => {
  uni.navigateTo({
    url: `/pages/index/information/infoDetails/detail?id=${item.news_id}`
  })
}

// 初始化加载（视频只加载一次）
onMounted(() => {
  fetchNews(true)
  fetchVideo()
})
</script>

<!-- 样式保持完全不变 -->
<style lang="scss">
.body{
	background-color: #f7f7f9;
	.banner{
		height: 412rpx;
		width: 100%;
		padding: 0rpx 18rpx;
		box-sizing: border-box;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
			border-radius: 5rpx;
		}
	}
	.news-video{
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		margin:24rpx 18rpx ;
		padding: 42rpx 20rpx;
		.text{
			.title{
				font-size: 36rpx;
				font-weight: 700;
			}
			.mes{
				margin-top: 18rpx;
				font-size: 30rpx;
				color: #656565;
			}
		}
		image{
			width: 224rpx;
			height: 170rpx;
			border-radius: 5rpx;
		}
	}
	
	
	
	
	
	
	
	.newslist {
		display: flex;
		background-color: #fff;
		margin:10rpx 18rpx ;
		padding: 38rpx 18rpx;
		.new-box {
			display: flex;
			image{
				width: 224rpx;
				height: 170rpx;
				margin-right:20rpx;
				border-radius: 5rpx;
			}
			.new{
				.title{
					margin-top: 18rpx;
					font-size:36rpx;
					font-weight: 700;
				}
				.mes{
					// margin-top: 18rpx;
					display: flex;
					color: #656565;
				}
				
			}
		}
	}
}
</style>